﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择数据库表
    </title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.css">

    <!-- SmartAdmin Styles : Caution! DO NOT change the order -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production-plugins.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

    <!-- SmartAdmin RTL Support -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css">

    <!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">

    <!-- #FAVICONS -->
    <link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">

    <!-- #GOOGLE FONT -->
    <link rel="stylesheet" href="css/open-sans.css" type="text/css">

    <!-- #APP SCREEN / ICONS -->
    <link rel="apple-touch-icon" href="img/splash/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="img/splash/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="img/splash/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="img/splash/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">

    <link href="appcss/Common.css" rel="stylesheet" />
    <style>
        .dataTables_filter {
            width: 100% !important;
        }

        .input-group-addon {
            height: 17px !important;
            width: 17px !important;
        }

        #Table-TptList .dt-toolbar div:first-child {
            width: 59.5% !important;
            float: right;
        }

        #table-list_wrapper {
            width: 600px !important;
        }

        #table-list_length label {
            float: right;
        }
    </style>
</head>
<body class="desktop-detected minified">

    <!-- #MAIN PANEL -->
    <div id="main" role="main">

        <!-- RIBBON -->
        <div id="ribbon">

            <span class="ribbon-button-alignment">
                <span class="btn btn-ribbon"><i class="fa fa-home"></i></span>
            </span>

            <!-- breadcrumb -->
            <ol class="breadcrumb">
                <li><a href="DataServiceManagement.html">数据服务管理</a></li>
                <li><a href="javascript:window.history.back();">数据源管理</a></li>
                <li><a href="javascript:window.history.back();">数据源选择对应数据表方式</a></li>
                <li>选择已有数据表</li>
            </ol>
            <!-- end breadcrumb -->

        </div>
        <!-- END RIBBON -->


        <!-- MAIN CONTENT -->
        <div id="content">
            <div class="row hidden">
                <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
                    <h1 class="page-title txt-color-blueDark">
                        <i class="fa fa-edit fa-fw "></i>
                        主页
            <span>> 
				选择数据库表
            </span>
                    </h1>
                </div>

            </div>

            <!-- widget grid -->
            <section id="widget-grid" class="">

                <!-- row -->
                <div class="row">

                    <!-- NEW WIDGET START -->


                    <!-- NEW WIDGET START -->
                    <article class="col-sm-12 col-md-12 ">

                        <!-- Widget ID (each widget will need unique ID)-->
                        <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false"
                            data-widget-editbutton="false">
                            <header>
                                <h2>选择数据库表</h2>

                            </header>

                            <!-- widget div-->
                            <div>

                                <!-- widget edit box -->
                                <div class="jarviswidget-editbox">
                                    <!-- This area used as dropdown edit box -->

                                </div>
                                <!-- end widget edit box -->

                                <!-- widget content -->
                                <div class="widget-body no-padding">

                                    <!-- Success states for elements -->

                                    <form action="ChoseTableForDataSourceMappingTwo.html" class="smart-form" id="Mapping-table">

                                        <header>填写相关信息</header>
                                        <fieldset>
                                            <section>
                                                <label class="label">数据服务</label>
                                                <label class="input">
                                                    <input type="text" disabled="disabled" value="" id="ServiceName">
                                                </label>
                                            </section>

                                            <section>
                                                <label class="label">数据源</label>
                                                <label class="input">
                                                    <input type="text" disabled="disabled" value="" id="DataSourceName">
                                                </label>
                                            </section>
                                        </fieldset>
                                        <fieldset>
                                            <section>
                                                <div>
                                                    <a class="btn btn-default" href="javascript:void(0);" onclick="ShowTptList()"
                                                        style="padding: 6px 12px !important;">转换第三方数据表为内部数据表</a>

                                                </div>
                                            </section>
                                        </fieldset>
                                        <fieldset>
                                            <section>
                                                <label class="label">
                                                    数据表
                                                </label>
                                                <table class="table table-bordered table-hover smart-form "
                                                    style="width: 50%;" id="table-list">
                                                    <thead>
                                                        <tr>
                                                            <th style="width: 10px;"></th>
                                                            <th>表名</th>
                                                            <th>创建人</th>
                                                            <th>创建时间</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </section>
                                        </fieldset>
                                        <footer>
                                            <input name="sysno" id="sysno" type="hidden" />
                                            <input name="Id" id="Service-Id" type="hidden" />
                                            <input name="dataSourceId" id="Source-Id" type="hidden" />
                                            <input type="submit" value="下一步" class="btn btn-primary" />
                                            <button type="button" class="btn btn-default" onclick="window.history.back();">
                                                返回
                                            </button>
                                        </footer>

                                    </form>
                                    <!--/ Success states for elements -->
                                </div>
                                <!-- end widget content -->
                            </div>
                            <!-- end widget div -->
                        </div>
                        <!-- end widget -->
                    </article>
                </div>

                <!-- end row -->

            </section>
        </div>
        <!-- END MAIN CONTENT -->
    </div>

    <!--================================================== -->

    <!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->


    <!-- #PLUGINS -->
    <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->


    <script src="js/libs/jquery-2.1.1.min.js"></script>
    <script src="js/libs/jquery-ui-1.10.3.min.js"></script>
    <!-- BOOTSTRAP JS -->
    <script src="js/bootstrap/bootstrap.min.js"></script>

    <!-- IMPORTANT: APP CONFIG -->
    <script src="js/app.config.js"></script>


    <!-- CUSTOM NOTIFICATION -->
    <script src="js/notification/SmartNotification.min.js"></script>

    <!-- JARVIS WIDGETS -->
    <script src="js/smartwidgets/jarvis.widget.min.js"></script>


    <!-- SPARKLINES -->
    <script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

    <!-- JQUERY MASKED INPUT -->
    <script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>


    <!-- JQUERY UI + Bootstrap Slider -->
    <script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

    <script src="js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="js/plugin/datatables/dataTables.colVis.min.js"></script>
    <script src="js/plugin/datatables/dataTables.tableTools.min.js"></script>
    <script src="js/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="js/plugin/datatable-responsive/datatables.responsive.min.js"></script>

    <!-- MAIN APP JS FILE -->
    <script src="js/app.min.js"></script>

    <script src="appjs/Helper.js"></script>
    <script src="appjs/Common.js"></script>
    <script>
        var ServiceId = GetQueryString("Id");
        var dataSourceId = GetQueryString("dataSourceId");
        var sysno = GetQueryString("sysno");
        var ShowMappedType = 1;
        var Filter = "";
        $(function () {
            $("#Service-Id").val(ServiceId);
            $("#Source-Id").val(dataSourceId);
            $("#sysno").val(sysno);
            getServiceDetails();
            getDataSourceDetails();
            GetUnmappedDataTableList();
        });
        var GetUnmappedDataTableList = function () {
            if (this.tablelist == undefined) {
                this.tablelist = $('#table-list').dataTable({
                    "autoWidth": true,
                    "oLanguage": dataTableConfig,
                    "bLengthChange": false,
                    ordering: false,
                    bProcessing: true,
                    bStateSave: false,
                    serverSide: true,
                    searching: false,
                    iDisplayLength: 15,
                    "ajax": {
                        url: apiUrl,
                        "dataSrc": function (json) {
                            if (json.IsSccuess) {
                                var newjson = new Array();
                                for (var i = 0; i < json.Data.Items.length; i++) {
                                    if (i == 0) {
                                        newjson.push({ "name": json.Data.Items[i].Name, "option": ("<label class=\"radio\"><input type=\"radio\" checked='checked'   class=\"LogoColumn\" name='tableId' value=\"" + json.Data.Items[i].Id + "\" /> <i></i></label>"), "remarks": json.Data.Items[i].CreatedTime, "datasource": json.Data.Items[i].Creator });
                                    } else {
                                        newjson.push({ "name": json.Data.Items[i].Name, "option": ("<label class=\"radio\"><input type=\"radio\"   class=\"LogoColumn\" name='tableId' value=\"" + json.Data.Items[i].Id + "\" /> <i></i></label>"), "remarks": json.Data.Items[i].CreatedTime, "datasource": json.Data.Items[i].Creator });
                                    }
                                }
                                return newjson;
                            } else {
                                if (IsLogined(json.ErrorCode)) {
                                    alert("失败（" + "错误代码：" + json.ErrorCode + "，错误信息：" + json.Message + ")");
                                }
                            }
                            return [];
                        },
                        "data": function (d) {
                            console.log(JSON.stringify(d));
                            return $.extend({}, { "sys:sno": "Mapping" }, { "sys:act": "GetDataTableList" }, { "draw": d.draw }, { "length": d.length }, { "Page": parseInt(d.start / d.length) }, { "Filter": Filter }, { "Type": ShowMappedType });
                        }
                    },
                    columns: [
                        { data: 'option' },
                        { data: 'name' },
                        { data: 'datasource' },
                        { data: 'remarks' }

                    ],
                    fnDrawCallback: function () {
                        var str = "<div id=\"table-list_length\" class=\"dataTables_length\"><label>";
                        str += "<select class=\"form-control\" onchange='ShowMappedTypeChange(this)'>";
                        if (ShowMappedType == 1) {
                            str += "<option value=\"2\" >已映射的表</option>";
                            str += "<option value=\"1\" selected='selected'>未映射的表</option>";
                        } else {
                            str += "<option value=\"2\" selected='selected'>已映射的表</option>";
                            str += "<option value=\"1\">未映射的表</option>";
                        }
                        str += "</select></label></div>";
                        $("#table-list_wrapper .dt-toolbar .col-xs-12:last").html(str);
                        var str1 = "<div id=\"table-list_filter\" class=\"dataTables_filter\"><label>";
                        str1 += "<input class=\"form-control\" type=\"search\" placeholder=\"\" value='" + Filter + "' aria-controls=\"table-list\"><span onclick='searchtable()' class=\"input-group-addon\"  style=\"float: right\"><i class=\"glyphicon glyphicon-search\"></i></span></label>";
                        $("#table-list_wrapper .dt-toolbar .col-xs-12:first").html(str1);
                    }
                });

            }
        }
        var ShowMappedTypeChange = function (obj) {
            ShowMappedType = parseInt($(obj).val());
            tablelist.fnDraw();
        }
        var searchtable = function () {
            console.log($("[aria-controls=table-list]").val());
            Filter = $("[aria-controls=table-list]").val();
            tablelist.fnDraw();
        }
        //获取服务的详细信息
        var getServiceDetails = function () {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": sysno,
                    "sys:act": "GetDataService",
                    "ServiceId": ServiceId
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        $("#ServiceName").val(data.Data.Name);
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                        }
                    }
                },
                beforeSend: function () {
                    // $("btn_login").html("登录中...");
                }
            });
        }
        var getDataSourceDetails = function () {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "ETL",
                    "sys:act": "GetDataSource",
                    "DataServiceId": ServiceId,
                    "DataSourceId": dataSourceId
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        $("#DataSourceName").val(data.Data.Name);//名称
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                        }
                    }
                },
                beforeSend: function () {
                    // $("btn_login").html("登录中...");
                }
            });
        }

        //组合表格数据
        var ProductionColumnsTable = function (data) {
            var trlist = "";
            for (var i = 0; i < data.length; i++) {
                var $this = data[i];
                trlist += (AssembleColumnsData($this));
            }
            $("#Table-TptDetails tbody").html(trlist);

        }
        //传入data对象返回一行的表格数据
        var AssembleColumnsData = function (data) {
            var tr = ("<tr>");
            tr += ("<td>" + data.Name + "</td>");
            tr += ("<td>" + data.Type + "</td>");
            tr += ("<td>" + data.Length + "</td>");
            tr += ("<td><input type='checkbox' disabled='disabled'" + (data.IsNullable ? "" : "checked='checked'") + "/></td>");
            tr += ("<td><input type='checkbox' disabled='disabled' " + (data.PK ? "checked='checked'" : "") + "/></td>");
            tr += ("</tr>");
            return tr;
        }
        var ShowTptList = function () {
            TptGetList();
            $("#Modal-TptList").modal("show");
        }
        var TptGetList = function () {

            if (this.table == undefined) {
                this.table = $('#Table-TptList').dataTable({
                    "autoWidth": true,
                    "oLanguage": dataTableConfig,
                    "bLengthChange": false,
                    ordering: false,
                    bProcessing: true,
                    bStateSave: false,
                    serverSide: true,
                    searching: true,
                    iDisplayLength: 15,
                    "ajax": {
                        url: apiUrl,
                        "dataSrc": function (json) {
                            if (json.IsSccuess) {
                                var newjson = new Array();
                                for (var i = 0; i < json.Data.Items.length; i++) {
                                    var editstr = " <a href=\"javascript:ConvertDataTable('" + json.Data.Items[i].Id + "');\"><i class=\"fa fa-hand-o-right\"></i>转换</a>";
                                    newjson.push({ "name": json.Data.Items[i].Name, "option": editstr });
                                }
                                return newjson;
                            } else {
                                if (IsLogined(json.ErrorCode)) {
                                    alert("失败（" + "错误代码：" + json.ErrorCode + "，错误信息：" + json.Message + ")");
                                }
                            }
                            return [];
                        },
                        "data": function (d) {
                            console.log(JSON.stringify(d));
                            return $.extend({}, { "sys:sno": "TPT" }, { "sys:act": "GetList" }, { "draw": d.draw }, { "length": d.length }, { "Page": parseInt(d.start / d.length) }, { "Filter": d.search.value });
                        }
                    },
                    columns: [
                        { data: 'name' },
                        { data: 'option' }
                    ]
                });

            }
        }
        var ConvertDataTable = function (tableId) {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "TPT",
                    "sys:act": "GetColumns",
                    "TableId": tableId
                },
                dataType: "json",
                success: function (data) {
                    if (data.IsSccuess) {
                        ProductionColumnsTable(data.Data.Items);
                        $("#Modal-TptDetails").modal("show");
                        $("#ConvertBtn").attr("onclick", "SubmitDataTable('" + tableId + "')");
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                        }
                    }
                },
                beforeSend: function () {
                    ShowGritter("获取信息中");
                }
            });
        }
        var SubmitDataTable = function (tableId) {
            $.ajax({
                url: apiUrl,
                data: {
                    "sys:sno": "TPT",
                    "sys:act": "Convert",
                    "TableId": tableId
                },
                dataType: "json",
                type: "Post",
                success: function (data) {
                    if (data.IsSccuess) {
                        ShowGritter("转换成功");
                        $("#Modal-TptList").modal("hide");
                        $("#Modal-TptDetails").modal("hide");
                        ShowGritter("更新数据表列表中...");
                        GetUnmappedDataTableList();
                    } else {
                        if (IsLogined(data.ErrorCode)) {
                            alert("失败（" + "错误代码：" + data.ErrorCode + "，错误信息：" + data.Message + ")");
                        }
                    }
                },
                beforeSend: function () {
                    ShowGritter("转换中...");
                }
            });
        }
    </script>
    <div aria-hidden="true" aria-labelledby="remoteModalLabel" role="dialog" tabindex="-1" id="Modal-TptList"
        class="modal fade" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×
                    </button>
                    <h4 class="modal-title">选择第三方数据表</h4>
                </div>
                <div class="modal-body no-padding">

                    <form class="smart-form" id="Form-TptList" action="">
                        <fieldset>
                            <section>
                                <table class="table table-bordered table-hover smart-form " id="Table-TptList">
                                    <thead>
                                        <tr>
                                            <th>表名</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </section>
                        </fieldset>
                        <footer>
                            <!-- <button class="btn btn-primary" type="submit">
                                提交
                            </button>-->
                            <button data-dismiss="modal" class="btn btn-default" type="button">
                                取消
                            </button>
                        </footer>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div aria-hidden="true" aria-labelledby="remoteModalLabel" role="dialog" tabindex="-1" id="Modal-TptDetails"
        class="modal fade" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                        ×
                    </button>
                    <h4 class="modal-title">确认信息</h4>
                </div>
                <div class="modal-body no-padding">

                    <form class="smart-form" action="">
                        <fieldset>
                            <section>
                                <label class="label">列</label>
                                <table class="table table-bordered table-hover smart-form " id="Table-TptDetails">
                                    <thead>
                                        <tr>
                                            <th>列</th>
                                            <th>类型</th>
                                            <th>长度</th>
                                            <th>允许为空</th>
                                            <th>主键</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </section>
                        </fieldset>
                        <footer>
                            <button class="btn btn-primary" type="button" id="ConvertBtn">
                                立即转换
                            </button>
                            <button data-dismiss="modal" class="btn btn-default" type="button">
                                取消
                            </button>
                        </footer>

                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
